<!--
 * @Author: zhuhaohua 250293786@qq.com
 * @Date: 2024-01-02 10:21:51
 * @LastEditors: zhayang 1063975710@qq.com
 * @LastEditTime: 2024-07-03 23:06:13
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    class="app-container fit bg-#fff flex flex-col flex-nowrap relative container-box"
  >
    <div class="header-title">广告机编辑</div>
    <div class="sider-tabs fit box">
      <el-row
        :gutter="40"
        class="full-h"
      >
        <el-col
          :span="4"
          class="full-h"
        >
          <div class="sider-tabs-wrap">
            <div
              v-for="(item, index) in options"
              :key="index"
              class="sider-tab full-w flex items-center h-40 m-b-10 last:m-0 text-#1C1D23 text-14 transition p-x-8 p-y-12 cursor-pointer"
              :class="{
                'bg-#E6FEFBFF rd-4': active === index
              }"
              @click="changeActive(index)"
            >
              <img
                class="w16 h-16 m-r-8"
                :src="item.img"
              />
              {{ item.label }}
            </div>
          </div>
        </el-col>
        <el-col
          :span="20"
          class="full-h"
        >
          <el-row
            :gutter="20"
            class="full-h"
          >
            <el-col
              :span="8"
              class="full-h flex flex-col flex-nowrap"
            >
              <div
                v-show="active === 0"
                class="full-h"
              >
                <!-- setting -->
                <div style="margin-bottom: 40px">
                  <div
                    v-for="(item, i) in settingList"
                    :key="i"
                    :class="[
                      'txt-title',
                      'size1',
                      currentI === i ? 'active' : ''
                    ]"
                    :style="`font-size:${item.props.size}px`"
                    @click="addNode(i)"
                  >
                    {{ item.txt }}
                  </div>
                </div>
                <div>
                  <div class="text-box">文字属性</div>
                  <div class="item-attr">
                    <span class="item-label">字号</span>
                    <el-select
                      v-model="sizeValue"
                      class="item-value"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in sizeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                  <div class="item-attr">
                    <span class="item-label">颜色</span>
                    <div class="item-value">
                      <el-select
                        v-model="colorValue"
                        class="color-select"
                        readonly
                        placeholder="请选择"
                      />
                      <el-color-picker
                        v-model="colorValue"
                        class="color-pick"
                      />
                    </div>
                  </div>
                  <div class="item-attr">
                    <span class="item-label">对齐</span>
                    <div class="item-value align-box">
                      <div
                        :class="[
                          'align-item',
                          alignValue === 'left' ? 'on' : ''
                        ]"
                        @click="selectAlign('left')"
                      >
                        <img
                          src="@/assets/images/model/left.png"
                          alt=""
                        />
                      </div>
                      <div
                        :class="[
                          'align-item',
                          alignValue === 'center' ? 'on' : ''
                        ]"
                        @click="selectAlign('center')"
                      >
                        <img
                          src="@/assets/images/model/center.png"
                          alt=""
                        />
                      </div>
                      <div
                        :class="[
                          'align-item',
                          alignValue === 'right' ? 'on' : ''
                        ]"
                        @click="selectAlign('right')"
                      >
                        <img
                          src="@/assets/images/model/right.png"
                          alt=""
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                v-show="active === 1"
                class="full-h overflow-hidden"
                style="width: 232px"
              >
                <SegmentTabs
                  :data="options[1].menu"
                  @change="changeIndex"
                />
                <div
                  v-show="changeI === 0"
                  class="full-h pick-area"
                >
                  <div
                    v-for="(item, i) in pickList"
                    :key="i"
                    :class="['pick-item', currentPick === i ? 'on' : '']"
                    @click="checkPick(item, i, 'system')"
                  >
                    <img
                      :src="item.src"
                      alt="贴纸名称"
                    />
                    <div class="pick-txt">{{ item.name }}</div>
                  </div>
                </div>
                <!-- 上传贴纸 -->
                <div
                  v-show="changeI === 1"
                  class="full-h pick-area"
                >
                  <UpImgList
                    class="pick-item h108"
                    :url="uploadUrl"
                    @getImg="setImg"
                  />
                  <div
                    v-for="(item, i) in uploadList"
                    :key="i"
                    :class="['pick-item', currentPick === i ? 'on' : '']"
                    @click="checkPick(item, i, 'upload')"
                  >
                    <img
                      :src="item.src"
                      alt="贴纸名称"
                    />
                    <div class="pick-txt">贴纸名称</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <div
          class="show-right"
          :style="
            cut_bg_image
              ? `background:url('${cut_bg_image}') no-repeat ;background-size:cover`
              : 'border:1px solid #f2f2f2;'
          "
        >
          <vue-draggable
            ref="drag"
            class="demo-box"
            :data="dragList"
            @updata="updataDragList"
            @changeTxt="changeDrag"
          />
        </div>
        <div class="btn-box">
          <el-button
            size="small"
            @click="back"
          >
            返回
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="save"
          >
            保存
          </el-button>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import SegmentTabs from '@/components/bmp/segment-tabs.vue'
import vueDraggable from '@/components/draggable/index.vue'
import UpImgList from '@/components/upload/up-image-list.vue'
import { editModelConfig, modelDet, getPickList } from '@/api/model'
export default {
  components: {
    SegmentTabs,
    vueDraggable,
    UpImgList
  },
  data() {
    return {
      active: 0,
      options: [
        {
          label: '文字',
          value: 0,
          img: require('@/assets/images/model/txt.png'),
          menu: [
            {
              label: '颜色',
              value: 0
            },
            {
              label: '公共',
              value: 1
            },
            {
              label: '上传',
              value: 2
            }
          ]
        },
        {
          label: '贴纸',
          value: 1,
          img: require('@/assets/images/model/tz.png'),
          menu: [
            {
              label: '通用贴纸',
              value: 0
            },
            {
              label: '上传贴纸',
              value: 1
            }
          ]
        }
      ],
      bgActive: 0,
      colorList: [
        {
          label: '颜色1',
          value: '#04D1B8'
        },
        {
          label: '颜色2',
          value: '#CFE6FF'
        },
        {
          label: '颜色3',
          value: '#FFCBD1'
        }
      ],
      pickValue: {
        type: '',
        value: ''
      },
      personActive: 0,
      voiceActive: 0,
      // 颜色
      sizeList: [
        {
          value: '12',
          label: '12'
        },
        {
          value: '16',
          label: '16'
        },
        {
          value: '20',
          label: '20'
        }
      ],
      colorValue: '',
      sizeValue: '',
      alignValue: '',
      dragList: [],
      settingList: [
        {
          txt: '添加标题',
          props: {
            size: '20',
            color: '#04D1B8',
            align: 'left'
          }
        },
        {
          txt: '添加标题',
          props: {
            size: '16',
            color: '#04D1B8',
            align: 'center'
          }
        },
        {
          txt: '添加标题',
          props: {
            size: '12',
            color: '#04D1B8',
            align: 'right'
          }
        }
      ],
      currentI: null,
      // 贴纸
      pickList: [],
      currentPick: null,
      changeI: 0,
      uploadList: [],
      uploadUrl: '',
      cut_bg_image: '',
      tabsI: []
    }
  },
  watch: {
    colorValue(val) {
      if (this.currentI) {
        this.settingList[this.currentI].props.color = val
        const _obj = this.dragList.find(
          (v) => v.type === 'txt' && v.i === this.currentI
        )
        if (_obj) {
          _obj.props.color = val
        }
      }
    },
    sizeValue(val) {
      if (this.currentI) {
        this.settingList[this.currentI].props.size = val
        const _obj = this.dragList.find(
          (v) => v.type === 'txt' && v.i === this.currentI
        )
        if (_obj) {
          _obj.props.size = val
        }
      }
    }
  },
  created() {},
  mounted() {
    this.getPick()
    this.getDet()
  },
  methods: {
    changeDrag(val, i) {
      this.$set(this.dragList[i], 'context', val)
    },
    getPick() {
      getPickList({ group: 'chartlet' }).then((res) => {
        this.pickList = res.data.map((v) => {
          return {
            src: v.payload,
            name: v.title
          }
        })
      })
    },
    getDet() {
      modelDet({ model_uniqueid: this.$route.query.uid }).then((res) => {
        this.cut_bg_image = res.data.cut_bg_image
        this.dragList = res.data.machine_config.layout_config
          ? JSON.parse(res.data.machine_config.layout_config)
          : []
        const imgObj = this.dragList.find((v) => {
          if (v.type === 'img') {
            return v
          }
        })
        if (imgObj) {
          if (imgObj.imgType === 'system') {
            this.changeI = 0
          } else {
            this.changeI = 1
          }
          this.currentPick = imgObj.i
        }
        const txtObj = this.dragList.find((v) => {
          if (v.type === 'txt') {
            return v
          }
        })
        if (txtObj) {
          this.currentI = txtObj.i
          this.sizeValue = txtObj.props.size
          this.colorValue = txtObj.props.color
          this.alignValue = txtObj.props.align
        }
      })
    },
    updataDragList(i, x, y, w, h) {
      this.$set(this.dragList[i], 'x', x)
      this.$set(this.dragList[i], 'y', y)
      w && this.$set(this.dragList[i], 'w', w)
      h && this.$set(this.dragList[i], 'h', h)
    },
    checkPick(item, i, type) {
      this.currentPick = i
      const x = this.dragList.findIndex((v) => v.type === 'img')
      const img = new Image()
      // 设置Image对象的src为上传的文件
      img.src = item.src
      // 在Image对象加载完成后获取图片的宽度和高度
      img.onload = () => {
        if (x > -1) {
          if (this.dragList[x].i === i && type === this.dragList[x].imgType) {
            this.dragList.splice(x, 1)
            this.currentPick = null
            return false
          } else {
            this.$set(this.dragList[x], 'src', item.src)
            this.$set(this.dragList[x], 'i', i)
            this.$set(
              this.dragList[x],
              'x',
              (214 - (img.width / img.height) * 100) / 2
            )
            this.$set(this.dragList[x], 'y', 10)
            this.$set(this.dragList[x], 'imgType', type)
            this.$set(this.dragList[x], 'w', (img.width / img.height) * 100)
            this.$set(this.dragList[x], 'h', 100)
          }
        } else {
          const obj = {
            type: 'img',
            x: (214 - (img.width / img.height) * 100) / 2,
            y: 10,
            w: (img.width / img.height) * 100,
            h: 100,
            src: item.src,
            i: i,
            imgType: type
          }
          this.dragList.push(obj)
        }
        this.$refs.drag.onDeactivated()
      }
    },
    setImg(url, name, file) {
      this.uploadList.push({
        src: url,
        name: name
      })
    },
    changeIndex(i) {
      let _arr = this.dragList.filter(
        (v) => v.type === 'img' && v.imgType === (i === 0 ? 'system' : 'upload')
      )
      if (_arr.length > 0) {
        this.currentPick = _arr[0].i
      } else {
        this.currentPick = null
      }
      this.changeI = i
      console.log(i)
    },
    back() {
      this.$router.go(-1)
    },
    // 保存
    save() {
      console.log(this.dragList, this.$route.query)
      const form = {
        model_uniqueid: this.$route.query.uid,
        layout_config: JSON.stringify(this.dragList)
      }
      editModelConfig(form).then((res) => {
        this.$message({
          message: '编辑成功！',
          type: 'success'
        })
        this.$router.go(-1)
      })
    },
    selectAlign(type) {
      if (this.currentI) {
        this.settingList[this.currentI].props.align = type
        const _obj = this.dragList.find(
          (v) => v.type === 'txt' && v.i === this.currentI
        )
        if (_obj) {
          _obj.props.align = type
        }
      }
      this.alignValue = type
    },
    addNode(type) {
      const index = this.dragList?.findIndex((v) => {
        return v.type == 'txt' && v.i == type
      })
      if (index > -1) {
        this.dragList.splice(index, 1)
        this.currentI = null
      } else {
        const i = this.dragList?.findIndex((v) => v.type == 'txt')
        if (i > -1) {
          this.currentI = type
          this.$set(this.dragList[i], 'props', this.settingList[type].props)
          this.$set(this.dragList[i], 'i', type)
        } else {
          this.currentI = type
          this.dragList.push({
            type: 'txt',
            x: 50,
            y: 50,
            w: 100,
            h: 50,
            context: `标题内容`,
            props: this.settingList[type].props,
            i: type
          })
        }
      }
      if (this.currentI || this.currentI === 0) {
        this.sizeValue = this.settingList[this.currentI].props.size
        this.colorValue = this.settingList[this.currentI].props.color
        this.alignValue = this.settingList[this.currentI].props.align
      }
      this.$refs.drag.onDeactivated()
    },
    changeActive(index) {
      this.active = index
    },
    pickBg(value, type) {
      this.pickValue = {
        value,
        type
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container-box {
  padding: 20px 150px;
  position: relative;
  .box {
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }
}
.header-title {
  position: relative;
  padding: 8px 13px;
  font-weight: 600;
  font-size: 20px;
  color: #1c1f23;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #04d1b8;
  }
}
.picked {
  border: 1px solid #04d1b8;
}
.txt-title {
  width: 228px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  background: #f4f5f9;
  border-radius: 4px 4px 4px 4px;
  margin-bottom: 12px;
  cursor: pointer;
  &.active {
    border: 1px solid #04d1b8;
  }
  &.size1 {
    font-weight: 600;
    font-size: 20px;
    color: #1c1f23;
  }
  &.size2 {
    font-weight: 500;
    font-size: 16px;
    color: #1c1f23;
  }
  &.size3 {
    font-weight: 400;
    font-size: 12px;
    color: #1c1f23;
  }
}
.text-box {
  font-weight: 600;
  font-size: 14px;
  color: #1c1f23;
  margin-bottom: 8px;
}
.item-attr {
  display: flex;
  margin-bottom: 12px;
  .item-label {
    font-weight: 400;
    font-size: 14px;
    color: #1c1f23;
    line-height: 32px;
    margin-right: 5px;
    width: 35px;
    flex: none;
    text-align: center;
    display: inline-block;
  }
  .item-value {
    width: 188px;
    position: relative;
    .color-pick {
      position: absolute;
      left: 0;
      bottom: 0;
      border: none;
      width: 100%;
      ::v-deep {
        .el-color-picker__trigger {
          width: 100%;
          .el-color-picker__color {
            width: 30px;
          }
        }
      }
    }
    .color-select {
      ::v-deep {
        .el-input__inner {
          padding-left: 40px;
        }
      }
    }
    &.align-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      border: 1px solid #e0e0e0;
      border-radius: 3px;
      div {
        cursor: pointer;
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 16px;
          height: 16px;
        }
        &.on {
          border: 1px solid #04d1b8;
          border-radius: 3px;
        }
      }
    }
  }
}
.demo-box {
  width: 100%;
  height: 100%;
  max-width: 216px;
  max-height: 384px;
  border-radius: 4px;
}
.show-right {
  position: absolute;
  right: 138px;
  top: 50%;
  transform: translateY(-50%);
  width: 216px;
  height: 384px;
  border: 1px solid #eee;
  border-radius: 8px;
}
.btn-box {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
}
.pick-area {
  height: calc(100% - 32px);
  overflow: auto;
  margin-right: -8px;
  .pick-item {
    display: inline-block;
    width: 108px;
    height: 130px;
    margin-right: 12px;
    margin-top: 12px;
    box-sizing: border-box;
    cursor: pointer;
    &.h108 {
      height: 108px;
    }
    &:nth-child(2n) {
      margin-right: 0;
    }
    img {
      width: 108px;
      height: 108px;
      display: block;
      border: 1px solid transparent;
      background: #f4f5f9;
    }
    &.on {
      img {
        border: 1px solid #04d1b8;
        border-radius: 3px;
      }
    }
    .pick-txt {
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      color: #1c1f23;
      margin-top: 4px;
    }
  }
}
</style>
